<template>
  <div>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" >
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

  <!--主页面-->
    <el-table :data="detail" @row-click="showDrawer">
      <el-table-column property="sn" label="产品编号" width="150"></el-table-column>
      <el-table-column property="name" label="品牌名称" width="200"></el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small"  @click.stop=" handleEdit ( scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click.stop="handleDel( scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--主页面分页-->
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size='pageSize'
          :total=total>
      </el-pagination>
    </div>
    <!--抽屉-->
    <el-drawer
        title="我嵌套了表格!"
        :visible.sync="drawer"
        direction="rtl"
        size="50%">
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" >
          <el-form-item>
            <el-button type="primary" @click="CThandleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table :data="types">
        <el-table-column property="name" label="产品名称" width="150"></el-table-column>
        <el-table-column property="types_id" label="产品类型编号" width="150"></el-table-column>
        <el-table-column label="操作" width="150">
          <template scope="scope">
            <el-button size="small"  @click.stop=" CThandleEdit ( scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click.stop="CThandleDel( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--嵌套表格分页-->
      <div class="block">
        <el-pagination
            layout="prev, pager, next"
            @current-change="CTcuechange"
            :page-size='pageSize'
            :total="totals">
        </el-pagination>
      </div>
    </el-drawer>
    <!--主页编辑页面-->
    <el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px"  ref="editForm">
        <el-form-item label="产品编号" prop="sn">
          <el-input v-model="editForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" >提交</el-button>
      </div>
    </el-dialog>

<!--抽屉编辑页面-->
    <el-dialog :title="title" :visible.sync="CTeditFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px"  ref="editForm">
        <el-form-item label="产品名称" >
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型编号" >
          <el-input v-model="typeid" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="CTeditSubmit" >提交</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer:false,
      detail:[],
      types:[],
      typeid:'',
      editFormVisible: false,//主编辑界面是否显示
      CTeditFormVisible:false,//抽屉编辑界面是否显示
      editForm: {
        sn: '',
        name: '',
        types_id:''
      },
      title:'',
      total:1,
      totals:1,
      currentPage:1,
      pageSize:10,
      CcurrentPage:1,
    }
  },
  methods:{
    /*通过id查询*/
    showDrawer(row){
      this.drawer=true;
      this.typeid=row.id
      this.getType()
    },
    /*获取主页列表*/
    getDetail(){
      var param={
        currentPage:this.currentPage,
        pagesize:this.pageSize
      }
      this.$http.post('/type', (param)).then((res) => {
        console.log(res.data);
        this.detail = res.data.query
        this.total = res.data.tatal
      })
    },
    /*获取抽屉也列表*/
    getType(){
      let parm={
        id:this.typeid,
        pagesize: this.pageSize,
        currentPage:this.CcurrentPage
      }
      console.log(parm.currentPage);
      this.$http.post('/detail',(parm)).then((res)=>{
        this.types=res.data.query
        this.totals=res.data.tatal
      })
    },
    /*显示主新增页面*/
    handleAdd:function (){
      this.editFormVisible=true  //编辑界面是否显示
      this.editForm={
        sn: '',
        name: ''
      }
    },
    /*显示抽屉新增页面*/
    CThandleAdd:function (){
      this.CTeditFormVisible=true  //编辑界面是否显示
      this.editForm={
        name: '',
        types_id: this.typeid
      }
    },
    /*显示主修改页面*/
    handleEdit:function (row){
      this.editFormVisible=true  //编辑界面是否显示
      this.editForm = Object.assign({}, row);
    },
    /*显示抽屉的修改页面*/
    CThandleEdit(row){
      console.log(row);
      this.editForm = Object.assign({}, row);
      this.CTeditFormVisible=true  //编辑界面是否显示
    },
    /*主页面提交添加和修改*/
    editSubmit(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            let param = Object.assign({}, this.editForm);
            this.$http.put('/type', param).then((res) => {
              //NProgress.done();
              this.$message({
                message: res.data.msg,
                type: res.data.success?'success':error
              });
              this.$refs['editForm'].resetFields();
              this.editFormVisible = false;
              this.getDetail();
            }).catch();
          });
        }
      });
    },
    /*抽屉编辑页面的提交*/
    CTeditSubmit(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            let param = Object.assign({}, this.editForm);
            console.log(param);
            this.$http.post('/detail/save', param).then((res) => {
              //NProgress.done();
              this.$message({
                message: res.data.msg,
                type: res.data.success?'success':error
              });
              this.$refs['editForm'].resetFields();
              this.CTeditFormVisible = false;
              this.getDetail();
              this.getType();
            }).catch();
          });
        }
      });
    },
    /*主页面分页点击事件*/
    handleCurrentChange(val){
      console.log(val);
      this.currentPage=val;
      this.getDetail();
    },
    /*抽屉页面分页点击事件*/
    CTcuechange(val){
      console.log(val);
      this.CcurrentPage=val;
      this.getType();
    },
    /*主页面删除*/
    handleDel(row){
      this.$http.delete('/type/'+row.id).then((res)=>{
        this.$message({
          message: res.data.msg,
          type: res.data.success?'success':error
        });
        this.getDetail();
      })
    },
    /*抽屉页面删除*/
    CThandleDel(row){

      this.$http.delete('/detail/'+row.id).then((res)=>{
        this.$message({
          message: res.data.msg,
          type: res.data.success?'success':error
        });
        this.getType();
      })
    }
  },
  mounted() {
    this.getDetail()
  }
}
</script>